<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/a.css">
    <title>Content</title>
</head>
<body>
    <p>Welcome {{.Name}}</p>

    <p>Your Password is {{.Password}}</p>
    
    <p><a href="/static/jsgame">Click here to have fun</a> <i>the game is from <a href="https://gitee.com/chinachen1995/js_breakthrough_games?_from=gitee_search">here</a></i> </p>

    <p>The table ：</p>

    <table id="data" >
        <caption>手机销量，Q1，Q2，Q3，Q3同比，Q3比上季</caption>
        <tr>
            <th>Apple</th>
            <th>Huawei</th>
            <th>Oppo</th>
            <th>Ov</th>
            <th>Xiaomi</th>
        </tr>
    </table>
    <p><button id="getdata">Get Data</button></p>

    <script>

        $("#getdata").on("click", function(e){
            $.ajax({ url: "api/data",  success: function(res){
                $("#data tbody").append($("<tr></tr>"))

                var last_row = $("#data tr").last()

                Object.keys(res).forEach(function(key){

                    var tdd = "<td>"+res[key] + "</td>";
                    last_row.append($(tdd))
                });

            }});
        })

    </script>

</body>
</html>